<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.mongodb.client.MongoCursor,org.bson.Document" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教师列表</title>  
</head>
<body>
    <%MongoCursor<Document> teacherList = (MongoCursor<Document>)request.getAttribute("result");%>
  	<jsp:include page="../navbar.html" />
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-2 pull-right">
				<a href="addteachers.jsp">
					<button class="btn btn-default">手动添加</button>
				</a>
			</div>
			<div class="col-md-4 pull-right">
				<form action="UploadServlet" method="post" enctype="multipart/form-data" name="form1" id="form1"  onsubmit="return validate()">
       				<a href="javascript:;" class="file">Excel表格导入
				     	<input type="file" name="file" />
				  	</a>
		            <span class="showFileName">
		             	未选择任何文件
		            </span>
      				<input type="hidden" name="usert">
      				<input type="submit" class="btn btn-primary" name="Submit" value="确定" />
  				</form>
			</div>
		</div>
		<div class="row mt20">
			<div class="col-md-10 col-md-offset-1">
				<div class="panel">
                	<div class="panel-body">
                  		<h4 class="page-header mt0">教师信息管理列表
	                  		<div class="pull-right col-md-4" style="margin-top:-10px">
								<form action="userManageServlet" method="post" class="form-horizontal">
									<div class="input-group">
									   <input type="hidden" name="type" value="t" />
								       <input class="form-control radius-clear" type="text" name="value" value="<%=request.getAttribute("queryvalue")==null?"":request.getAttribute("queryvalue") %>" placeholder="搜素" style="width:70%;" />
								       <select class="form-control" style="width:30%;" name="name">
								          <option value="username" <%="username".equals(request.getAttribute("queryname"))?"selected":"" %>>工号</option>
								          <option value="name" <%="name".equals(request.getAttribute("queryname"))?"selected":"" %>>姓名</option>
								       </select>								 
								       <span class="input-group-btn">
								          <button class="btn btn-default" type="submit" name="method" value="query">
								             <strong><em class="fa fa-search"></em></strong>
								          </button>
								       </span>
								    </div>
								</form>
							</div>
                  		</h4>
	                  	<%if(!teacherList.hasNext()) {%>
							<p class="text-center text-muted">暂无教师</p>
						<%} else {%>
	                  		<table class="table table-hover table-bordered text-center">
						    	<tr class="text-center">
						      		<th width="5%">序号</th>
									<th width="10%">教师工号</th>
									<th width="10%">姓名</th>
									<th width="5%">性别</th>
									<th width="10%">生日</th>
									<th width="10%">家庭电话</th>
									<th width="10%">手机</th>
									<th width="10%">邮箱</th>
									<th width="20%">操作</th>
						    	</tr>
						    	<% 
									int index = 0;
									while(teacherList.hasNext()) {
										Document document = teacherList.next();
										String username = document.getString("username");
										String name = document.getString("name");
										String sex = document.getString("sex");
										String birthday = document.getString("birthday");
										String homephone = document.getString("homephone");
										String phone = document.getString("phone");
										String email = document.getString("email");
										String title = document.getString("title");
										String finaleducation = document.getString("finaleducation");
										String finaleducationschool = document.getString("finaleducationschool");
										String finaldegree = document.getString("finaldegree");
										String finaldegreeschool = document.getString("finaldegreeschool"); 
										String researchdirection = document.getString("researchdirection");
										String mark = document.getString("mark");
										%>
							    	<tr>
							    		<td><%=++index %></td>
							    		<td><%=username %></td>
							    		<td><%=name %></td>
							    		<td><%=sex %></td>
							    		<td><%=birthday %></td>
							    		<td><%=homephone %></td>
							    		<td><%=phone %></td>
							    		<td><%=email %></td>						    		
							    	
							    		<td>
											<a onclick='showDetail("<%=username %>","<%=name %>","<%=sex %>","<%=birthday %>","<%=title %>","<%=finaleducation %>","<%=finaleducationschool %>","<%=finaldegree %>","<%=finaldegreeschool %>","<%=researchdirection %>","<%=homephone %>","<%=phone %>","<%=email %>","<%=mark %>")'>
												<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="查看详情" ><em class="fa fa-file"></em></button>
											</a>
							    			<a href="updateTeachers.jsp?_id=<%=document.getObjectId("_id")%>">
												<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="修改" ><em class="fa fa-pencil-square-o"></em></button>
											</a>
											<a href="userManageServlet?_id=<%=document.getObjectId("_id") %>&type=t&method=delete">
												<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="删除" ><em class="fa fa-trash"></em></button>
											</a>
							    		</td>	
							    	</tr>
							    	<%} %>
						    </table>
						 <%} %>
                  	</div>
                 </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						教师信息
					</h4>
				</div>
				<div class="modal-body">
				 	<div style="padding: 5px 15px">					 	
				 		<p><em class="fa fa-user fontsize20 fontcolor"></em><span id="name" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-vcard fontsize20 fontcolor"></em><span id="username" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-venus-mars fontsize20 fontcolor"></em><span id="sex" class="ml20 fontsize16"></span></p>
				 		<P><em class="fa fa-birthday-cake fontsize20 fontcolor"></em><span id="birthday" class="ml20 fontsize16"></span></P>
				 		<p><em class="fa fa-gift fontsize20 fontcolor"></em><span id="title" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-graduation-cap fontsize20 fontcolor"></em><span id="finaleducation" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-building-o fontsize20 fontcolor"></em><span id="finaleducationschool" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-graduation-cap fontsize20 fontcolor"></em><span id="finaldegree" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-building fontsize20 fontcolor"></em><span id="finaldegreeschool" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-share fontsize20 fontcolor"></em><span id="researchdirection" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-phone fontsize20 fontcolor"></em><span id="homephone" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-mobile fontsize20 fontcolor"></em><span id="phone" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-envelope fontsize20 fontcolor"></em><span id="email" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-bookmark fontsize20 fontcolor"></em><span id="mark" class="ml20 fontsize16"></span></p>
				 	</div>
				</div>
			</div>
		</div>
	</div>
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	  	$("#myModal").modal("hide");//加载页面首先隐藏模态框，指向模态框的ID
	  	function showDetail(username,name,sex,birthday,title,finaleducation,finaleducationschool,finaldegree,finaldegreeschool,researchdirection,homephone,phone,email,mark){//a链接的参数
	  		$("#myModal").modal("show");//显示模态框
	
	  		//将a标签传递的参数获取到，并显示在模态框里
	  		document.getElementById('username').innerHTML = "工号： "+username;
	  		document.getElementById('name').innerHTML = "姓名： "+name;
	  		document.getElementById('sex').innerHTML = "性别： "+sex;
	  		document.getElementById('birthday').innerHTML = "生日："+birthday;
	  		document.getElementById('title').innerHTML = "职称："+title;
	  		document.getElementById('finaleducation').innerHTML = "最后学历："+finaleducation;
	  		document.getElementById('finaleducationschool').innerHTML = "最后学历毕业院校："+finaleducationschool;
	  		document.getElementById('finaldegree').innerHTML = "最后学位："+finaldegree;
	  		document.getElementById('finaldegreeschool').innerHTML = "最后学位毕业院校："+finaldegreeschool;
	  		document.getElementById('researchdirection').innerHTML = "研究方向："+researchdirection;
	  		document.getElementById('homephone').innerHTML = "家庭电话："+homephone;
	  		document.getElementById('phone').innerHTML = "手机："+phone;
	  		document.getElementById('email').innerHTML = "邮箱："+email;
	  		document.getElementById('mark').innerHTML = "备注："+mark;
	    }
	  	function validate() {
	    	  var form = form1.file.value;
	          if (form == "") {
	        	  swal("没有选择文件","请选择要上传的文件", "warning");
	              return false;
	          }
	          else if(form.substring(form.lastIndexOf(".")+1,form.length)!="xls" &&
	        		  form.substring(form.lastIndexOf(".")+1,form.length)!="xlsx") {
	        	  swal("文件格式不正确","请上传Excel表格", "warning");
	        	  return false;
	          }
	          return true;
	      }
	      $(document).ready(function() {
	    	  $(".file").on("change","input[type='file']",function(){
		  		    var filePath=$(this).val();
		  		    if(filePath.substring(filePath.lastIndexOf(".")+1,filePath.length)=="xls" || 
		  		    		filePath.substring(filePath.lastIndexOf(".")+1,filePath.length)=="xlsx"){
		  		        var arr=filePath.split('\\');
		  		        var fileName=arr[arr.length-1];
		  		        $(".showFileName").text(fileName);
		  		    }else if(filePath==null || filePath==""){
		  		        $(".showFileName").text("未选择任何文件");
		  		        return false; 
		  		    }else {
		  		    	$(".showFileName").text("文件类型不正确");
		  		        return false;
		  		    }
		  		})	     
	      })
		  $(function () { $("[data-toggle='tooltip']").tooltip(); });
	</script>
</body>
</html>